<template>
    <el-row type="flex" id="body" style="width:100%;">
        <div id="wechatTip">
            <p>
                <img :src="require('@/assets/images/weixinTip.png')" style="width: 99%" alt="微信打开"/>
            </p>
        </div>
        <el-col :span="6">
            <el-image :src="require('@/assets/images/download_pattern_left.png')" style="width:100%; height:100vh"/>
        </el-col>
        <el-col :span="12" style="display:flex;flex-direction:column;justify-content: center; align-items: center;">
            <img id="qrcode" :src="require('@/assets/images/downloadCode.png')"/>
            <h1>医小助</h1>
            <el-button id="downloadBtn" @click="download" type="success" size="medium" round>点击下载<i class="el-icon-download el-icon--right"></i></el-button>
        </el-col>
        <el-col :span="6">
            <el-image :src="require('@/assets/images/download_pattern_right.png')" style="width:100%; height:100vh" />
        </el-col>
    </el-row>
</template>

<script>
import { exportFile } from '@/utils/util';
export default {
    methods:{
        download(){
            var userAgentInfo = navigator.userAgent.toLowerCase();
            if (/micromessenger/i.test(userAgentInfo)) {
                //判断在安卓微信中打开，显示在浏览器中打开提示
                document.getElementById("wechatTip").style.display = "flex";
            }else{
                this.request.get("/app/findLatestApp").then(res => {
                    if(res.code == 200){
                        this.request.get("/app/downloadApk",{
                            params:{
                                fileName: res.data.download_url
                            },
                            responseType:'blob'
                        }).then(res => {
                            if(res.status==200){
                                exportFile(res)
                            }else{  
                                this.$message({
                                  message: '服务器错误',
                                  type: 'error'
                                });
                            }
                        })
                    }
                })
                
            }
        },
    },
    created(){
        var userAgentInfo = navigator.userAgent.toLowerCase(); //判断是否浏览器
        if (/micromessenger/i.test(userAgentInfo) == true) {
            //判断在安卓微信中打开，显示在浏览器中打开提示
            document.getElementById("wechatTip").style.display = "flex";
        }
    }
}
</script>

<style>
#wechatTip{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    z-index: 1000000;
}
#wechatTip p{
    padding: 0 5%;
}
/* 视口宽度最小为320px，最大为1024px时，呈现样式 */
@media (min-width: 320px) and (max-width: 1024px) {
    #qrcode{
        width: 68%;
    }
    #downloadBtn{
        width: 68%;
    }
}

/* 视口宽度最小为1024px，最大为1600px时，呈现样式 */
@media (min-width: 1024px) and (max-width: 4096px) {
    #qrcode{
        width: 32%;
    }
    #downloadBtn{
        width: 32%;
    }
}
</style>